<template>
    <div class="header-container">
        <div class="zIndex" @click="returnBacks">
            <van-icon name="arrow-left" />
        </div>
        <slot></slot>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Icon } from 'vant';
Vue.use(Icon)
export default Vue.extend ({
    name: 'Header',
    methods: {
        returnBacks() {
            this.$emit('returns')
        }
    }
})
</script>

<style>
.van-icon {
    height: 100%;
    width: 80px;
    line-height: 100px;
}
</style>
<style lang="scss" scoped>
.header-container {
    width: 100%;
    height: 100px;
    display: flex;
    line-height: 100px;
    flex-direction: row;
    align-items: center;
    font-size: 48px;
    padding-left: 5px;
    position: relative;
    z-index: 111;
}
</style>